<template>
  <p>Sum is: {{ sum }}</p>
  <p v-show="isShow" style="color:red">Sum exceeds the maximum limit of 5</p>
  <button @click="increment">increment</button>
  <button @click="deincrement">deincrement</button>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, watch } from 'vue';

  interface State {
    sum: number;
    isShow: boolean;
    increment: () => void;
  }

  export default defineComponent({
    name: 'Watch',
    setup: () => {
      const data: State = reactive({
        sum: 0,
        isShow: false,
        increment: () => {
          data.sum += 1;
        },
        deincrement: () => {
          data.sum -= 1;
        }
      });
      watch<number>(
        () => data.sum,
        (newVal, oldVal) => {
          console.log(`${oldVal} to ${newVal}`);
          // console.log(newVal);
          data.isShow = newVal > 5;
        }
      );
      watch<(() => number | boolean)[]>(
        [() => data.sum, () => data.isShow],
        (newVal, oldVal) => {
          console.log(`${oldVal} to ${newVal}`);
          console.log(newVal);
          if (newVal[0] > 10 && newVal[1] === true) {
            data.sum = 0;
          } else if (newVal[0] < 0) {
            data.sum = 10;
          }
        }
      );
      return {
        ...toRefs(data)
      };
    }
  });
</script>

<style scoped></style>
